<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd">
<html>
<head>
<title>
Zapatec Utils Overview
</title>
<link rel ="stylesheet" type="text/css" href="../../../zapatec/utils/jsdocs/stylesheet.css" title="Style">
<script>
function asd() {
	
		parent.document.title="progressbar.js Overview";
	
}
</script>
</head>
<body bgcolor="white" onLoad="asd();">

<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> 	<font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top">
<em>
<b>Zapatec Utils</b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="../../../zapatec/utils/jsdocs/index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="../../../zapatec/utils/jsdocs/overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="../../../zapatec/utils/jsdocs/allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<center>
	
	   <h2>progressbar.js</h2>
	
</center>

	


<h4>Summary</h4>
<p>
	
		Progress Bar widget class derived from Widget. See 
 description of base Widget class at 
 http://trac.zapatec.com:8000/trac/wiki/Widget.

 <pre>
 Copyright (c) 2004-2006 by Zapatec, Inc.
 http://www.zapatec.com
 1700 MLK Way, Berkeley, California,
 94709, U.S.A.
 All rights reserved.
 </pre><BR/><BR/>
	
</p>

<hr>


    <table border="1" cellpadding="3" cellspacing="0" width="100%">
    <tr bgcolor="#CCCCFF" class="TableHeadingColor">
    <td colspan=2><font size="+2">
    
        <b>Class Summary</b>
    
    </font></td>
    </tr>
    
    <tr bgcolor="white" class="TableRowColor">
    <td width="15%"><b><a href="../../../zapatec/utils/jsdocs/Zapatec/ProgressBar.html">Zapatec.ProgressBar</a></b></td>
    <td>&nbsp;</td>
    </tr>
    
    </table>
    <hr/> 


<!-- ========== METHOD SUMMARY =========== -->

<!-- ========== END METHOD SUMMARY =========== -->


        <pre class="sourceview"><span class="comment">/* $Id: progressbar.js 4907 2006-10-25 15:09:26Z andrew $ */</span>
<span class="comment">/**
 * <span class="attrib">@fileoverview</span> Progress Bar widget class derived from Widget. See 
 * description of base Widget class at 
 * http://trac.zapatec.com:8000/trac/wiki/Widget.
 *
 * &lt;pre&gt;
 * Copyright (c) 2004-2006 by Zapatec, Inc.
 * http://www.zapatec.com
 * 1700 MLK Way, Berkeley, California,
 * 94709, U.S.A.
 * All rights reserved.
 * &lt;/pre&gt;
 */</span>

<span class="comment">/**
* Zapatec ProgressBar object. Creates the element for displaying progress
* of some process and gives an interface to work with it.
* <span class="attrib">@param</span> config [object] - progress bar config.
*
* Constructor recognizes the following properties of the config object
* \code
*	property name	| description
*-------------------------------------------------------------------------------------------------
*	parent				| [string or object] Reference to DOM element where
*								| newly created ProgressBar will be placed.
*	width					| [number] width of the ProgressBar in "px"
*	height				| [number] height of the ProgressBar in "px"
*	minValue			| [number] minimal value for ProgressBar values
*	maxValue			| [number] maximal value for ProgressBar values
*	value					| [number] actual value for ProgressBar values
*	showLabels		| [string] defines the way of labels displaying
*								| 'none' - no labels is shown
*								| 'values' - label with actual values is shown
*								| 'percents' - label with percentage is shown
*	title					| [string] defines title that will be shown before label if
* 							| showLabels is set to 'values' or 'percents'
* \endcode
*/</span>
<span class="comment">/**
 * ProgressBar class.
 *
 * <span class="attrib">@constructor</span>
 * <span class="attrib">@extends</span> Zapatec.Widget
 * <span class="attrib">@param</span> {object} objArgs User configuration
 */</span>
Zapatec.ProgressBar = <span class="reserved">function</span>(objArgs) {
	<span class="reserved">if</span> (arguments.length == 0) {
		objArgs = {};
	}
	Zapatec.ProgressBar.SUPERconstructor.call(<span class="reserved">this</span>, objArgs);
};

<span class="comment">/**
 * Unique static id of the widget class. Gives ability for Zapatec#inherit to
 * determine and store path to this file correctly when it is included using
 * Zapatec#include. When this file is included using Zapatec#include or path
 * to this file is gotten using Zapatec#getPath, this value must be specified
 * as script id.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.ProgressBar.id = <span class="literal">'Zapatec.ProgressBar'</span>;
<span class="comment">// Inherit Widget</span>
Zapatec.inherit(Zapatec.ProgressBar, Zapatec.Widget);

<span class="comment">/**
 * Initializes object.
 *
 * <span class="attrib">@param</span> {object} objArgs User configuration
 */</span>
Zapatec.ProgressBar.<span class="reserved">prototype</span>.init = <span class="reserved">function</span>(objArgs) {
	<span class="comment">// Call init method of superclass</span>
	Zapatec.ProgressBar.SUPERclass.init.call(<span class="reserved">this</span>, objArgs);
	<span class="comment">// Generates HTML form ProgressBar</span>
	<span class="reserved">this</span>.create();
};

<span class="comment">/**
 * Configures the widget. Gets called from init and reconfigure methods of
 * superclass.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} objArgs User configuration
 */</span>
Zapatec.ProgressBar.<span class="reserved">prototype</span>.configure = <span class="reserved">function</span>(objArgs) {
	<span class="reserved">this</span>.defineConfigOption(<span class="literal">'parent'</span>, null);
	<span class="reserved">this</span>.defineConfigOption(<span class="literal">'width'</span>, null);
	<span class="reserved">this</span>.defineConfigOption(<span class="literal">'height'</span>, null);
	<span class="reserved">this</span>.defineConfigOption(<span class="literal">'minValue'</span>, 0);
	<span class="reserved">this</span>.defineConfigOption(<span class="literal">'maxValue'</span>, 100);
	<span class="reserved">this</span>.defineConfigOption(<span class="literal">'value'</span>, null);
	<span class="reserved">this</span>.defineConfigOption(<span class="literal">'title'</span>, null);
	<span class="reserved">this</span>.defineConfigOption(<span class="literal">'showLabels'</span>, <span class="literal">'none'</span>);
	<span class="reserved">this</span>.defineConfigOption(<span class="literal">'themePath'</span>, Zapatec.zapatecPath+
										 <span class="literal">'../zpextra/themes/progressbar/'</span>);

	Zapatec.ProgressBar.SUPERclass.configure.call(<span class="reserved">this</span>, objArgs);

	<span class="comment">// Checks if there is parent element</span>
	<span class="reserved">this</span>.config.parent = Zapatec.Widget.getElementById(<span class="reserved">this</span>.config.parent);
	<span class="reserved">if</span> (!<span class="reserved">this</span>.config.parent) {
		Zapatec.Log({description: <span class="literal">"No reference to parent element."</span>});
		<span class="reserved">return</span> null;
	}

	<span class="comment">/*
	Checks if minimal value is lower than maximal -
	if true minValue is set to maxValue
	*/</span>
	<span class="reserved">if</span> (<span class="reserved">this</span>.config.minValue &gt;= <span class="reserved">this</span>.config.maxValue) {
		Zapatec.Log({description: <span class="literal">"Minimal value is greater "</span>+
						 <span class="literal">"than or equals to maximal value."</span>});
		throw <span class="literal">"Minimal value is greater than or equals to maximal value."</span>;
		<span class="reserved">return</span> null;
	}


	<span class="comment">/*
	Checks if current value is lower than maximal -
	if true current value is set to maxValue
	*/</span>
	<span class="reserved">if</span> (<span class="reserved">this</span>.config.value &gt; <span class="reserved">this</span>.config.maxValue) {
		Zapatec.Log({description: <span class="literal">"Actual value is out of bounds."</span>});
		<span class="reserved">this</span>.config.value = <span class="reserved">this</span>.config.maxValue;
		<span class="reserved">return</span> null;
	}

	<span class="comment">/*
	 Checks if current value is greater than minimal -
	 if true current value is set to maxValue
	 */</span>
	<span class="reserved">if</span> (<span class="reserved">this</span>.config.value &lt; <span class="reserved">this</span>.config.minValue) {
		Zapatec.Log({description: <span class="literal">"Actual value is out of bounds."</span>});
		<span class="reserved">this</span>.config.value = <span class="reserved">this</span>.config.minValue;
		<span class="reserved">return</span> null;
	}

	<span class="comment">// defines field to protect configuration value from changes</span>
	<span class="reserved">this</span>.currentValue = <span class="reserved">this</span>.config.value;

	<span class="comment">// Checks if showLabels parameter has correct value</span>
	<span class="reserved">if</span> ((<span class="reserved">this</span>.config.showLabels != <span class="literal">'none'</span>) &amp;&amp;
		(<span class="reserved">this</span>.config.showLabels != <span class="literal">'values'</span>) &amp;&amp;
		(<span class="reserved">this</span>.config.showLabels != <span class="literal">'percents'</span>)) {
		Zapatec.Log(
		{description: <span class="literal">"Wrong showLabels value. Must be 'none',"</span>+
			<span class="literal">"'values' or 'percents'."</span>});
		<span class="reserved">return</span> null;
	}

};


<span class="comment">/**
 * Creates HTML for ProgressBar
 * <span class="attrib">@private</span>
 */</span>
Zapatec.ProgressBar.<span class="reserved">prototype</span>.create = <span class="reserved">function</span>() {
	<span class="comment">// Create DIV for all parts of ProgressBar</span>

	<span class="comment">// Parent container</span>
	<span class="reserved">this</span>.container = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.config.parent);
	<span class="reserved">this</span>.container.className = <span class="reserved">this</span>.getClassName({
		prefix: <span class="literal">"zpProgressBar"</span>, suffix: <span class="literal">"Container"</span>});
	<span class="reserved">this</span>.container.style.width = <span class="reserved">this</span>.config.width + <span class="literal">"px"</span>;

	<span class="comment">// Container for ProgressBar stripe</span>
	<span class="reserved">this</span>.internalContainer = Zapatec.Utils.createElement(<span class="literal">"div"</span>,<span class="reserved">this</span>.container);
	<span class="reserved">this</span>.internalContainer.className = <span class="literal">"internal"</span>;
	<span class="reserved">this</span>.internalContainer.style.height = <span class="reserved">this</span>.config.height - 4 + <span class="literal">"px"</span>;
	<span class="reserved">this</span>.internalContainer.style.width = <span class="reserved">this</span>.calculatePercentage() + <span class="literal">"%"</span>;

	<span class="comment">// Additional variable to store height if labels are shown</span>
	var additionalHeightForLabels = 0;
	<span class="comment">// Container for Labels</span>
	<span class="reserved">if</span> (<span class="reserved">this</span>.config.showLabels != <span class="literal">'none'</span>) {
		<span class="reserved">this</span>.labelsContainer = Zapatec.Utils.createElement(<span class="literal">"div"</span>,
				<span class="reserved">this</span>.container);
		<span class="reserved">this</span>.labelsContainer.className = <span class="literal">"labels"</span>;
		<span class="reserved">this</span>.labelsContainer.style.width = <span class="reserved">this</span>.config.width - 4 + <span class="literal">"px"</span>;
		additionalHeightForLabels = <span class="reserved">this</span>.labelsContainer.offsetHeight;
	}

	<span class="reserved">this</span>.container.style.height = <span class="reserved">this</span>.config.height +
								  additionalHeightForLabels +
								  <span class="literal">"px"</span>;

	<span class="reserved">this</span>.displayLabel();
}

<span class="comment">/*
 * Calculates width for current value
 * <span class="attrib">@return</span> width in pixels
 * <span class="attrib">@type</span> int
*/</span>
Zapatec.ProgressBar.<span class="reserved">prototype</span>.calculateWidth = <span class="reserved">function</span>() {
	<span class="reserved">return</span> Math.round(
			(<span class="reserved">this</span>.currentValue / (<span class="reserved">this</span>.config.maxValue - <span class="reserved">this</span>.config.minValue))
		) * <span class="reserved">this</span>.config.width;
}

<span class="comment">/*
  Calculates percentage for current value
 * <span class="attrib">@return</span> width in percents
 * <span class="attrib">@type</span> float
*/</span>
Zapatec.ProgressBar.<span class="reserved">prototype</span>.calculatePercentage = <span class="reserved">function</span>() {
	<span class="reserved">return</span> (<span class="reserved">this</span>.currentValue / (<span class="reserved">this</span>.config.maxValue - <span class="reserved">this</span>.config.minValue))
			* 100;
}

<span class="comment">/**
 * Redraws Progressbar after changing of currentValue
 */</span>
Zapatec.ProgressBar.<span class="reserved">prototype</span>.redraw = <span class="reserved">function</span>() {
	<span class="reserved">this</span>.internalContainer.style.width = <span class="reserved">this</span>.calculatePercentage() + <span class="literal">"%"</span>;
	<span class="reserved">this</span>.displayLabel();
}

<span class="comment">/**
 * Displays labels
 */</span>
Zapatec.ProgressBar.<span class="reserved">prototype</span>.displayLabel = <span class="reserved">function</span>(){
	var text = <span class="literal">''</span>;
	<span class="reserved">if</span> (<span class="reserved">this</span>.config.showLabels == <span class="literal">'values'</span>) {
		text = <span class="reserved">this</span>.currentValue+<span class="literal">"/"</span>+
			   (<span class="reserved">this</span>.config.maxValue-<span class="reserved">this</span>.config.minValue);
	}
	<span class="reserved">if</span> (<span class="reserved">this</span>.config.showLabels == <span class="literal">'percents'</span>) {
		text = Math.round(<span class="reserved">this</span>.calculatePercentage())+<span class="literal">"%"</span>;
	}
	<span class="reserved">if</span> (<span class="reserved">this</span>.config.showLabels != <span class="literal">'none'</span>) {
		<span class="reserved">if</span> (<span class="reserved">this</span>.config.title != null) {
			text = <span class="reserved">this</span>.config.title + text; 
		}
		<span class="reserved">this</span>.labelsContainer.innerHTML = text;
	}

}

<span class="comment">/**
 * Set new progress value
 * <span class="attrib">@param</span> value Progress value
 */</span>
Zapatec.ProgressBar.<span class="reserved">prototype</span>.setProgress = <span class="reserved">function</span> (value) {
	value = parseFloat(value);
	<span class="reserved">if</span> (isNaN(value)) {
		Zapatec.Log({description:<span class="literal">'Progress value is not a number!'</span>});
		<span class="reserved">return</span> false;
	}
	<span class="reserved">this</span>.currentValue = value;
	<span class="reserved">this</span>.redraw();
	<span class="reserved">return</span> null;
}

<span class="comment">/**
 * Get current progress
 * <span class="attrib">@return</span> Current progress value
 * <span class="attrib">@type</span> float
 */</span>
Zapatec.ProgressBar.<span class="reserved">prototype</span>.getProgress = <span class="reserved">function</span> () {
	<span class="reserved">return</span> <span class="reserved">this</span>.currentValue;
}

<span class="comment">/**
 * Fires cancel event
 */</span>
Zapatec.ProgressBar.<span class="reserved">prototype</span>.cancel = <span class="reserved">function</span> () {
	<span class="reserved">this</span>.fireEvent(<span class="literal">'cancel'</span>, <span class="reserved">this</span>.currentValue);
}


<span class="comment">/**
 * Hides ProgressBar
 */</span>
Zapatec.ProgressBar.<span class="reserved">prototype</span>.hide = <span class="reserved">function</span> () {
	<span class="reserved">this</span>.container.style.display = <span class="literal">'none'</span>;
}
</pre>
	<hr>



<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> <font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top"><em>
<b>Zapatec Utils</b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="../../../zapatec/utils/jsdocs/index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="../../../zapatec/utils/jsdocs/overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="../../../zapatec/utils/jsdocs/allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<font size="-1">

</font>
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Thu Aug 16 12:18:39 2007</div>
</body>
</html>
